<template>
  <SysDialogVue
    :title="dialog.title"
    :width="dialog.width"
    :height="dialog.height"
    :visible="dialog.visible"
    @onClose="close"
    @onConfirm="confirm"
  >
    <template v-slot:content>
      <el-tree
        :data="treeData.data"
        node-key="id"
        :props="defaultProps"
        default-expand-all
        :expand-on-click-node="false"
        ref="parentTree"
        :highlight-current="true"
        @node-click="handleNodeClick"
      >
        <template #default="{ node, data }">
          <div class="custom-tree-container">
            <!-- 长度为0说明没有下级 -->
            <span v-if="data.children.length == 0">
              <DocumentRemove
                style="width: 1.3em; height: 1.3em; margin-right: 5px;color: #8c8c8c;position: relative;top: 3px;"
              ></DocumentRemove>
            </span>
            <span v-else @click.stop="openBtn(data)">
              <component
                style="width: 1.1em; height: 1.1em; margin-right: 5px;color: #8c8c8c;position: relative;top: 3px;"
                :is="data.open ? Plus : Minus"
              />
            </span>
            <span>{{ node.label }}</span>
          </div>
        </template>
      </el-tree>
    </template>
  </SysDialogVue>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { DocumentRemove, Plus, Minus } from '@element-plus/icons-vue'
// 引入弹窗的组件
import SysDialogVue from '@/components/SysDialog.vue'
// 这个是获取操作弹窗的参数
import useDialog from '@/hooks/useDialog'
// 这个组件的操作文件
import useParent from '@/composables/department/useParent'
// 注意这里并没有引入onConfirm事件，而是自己定义了一个confirm事件
const { dialog, onClose, onConfirm, onShow } = useDialog()
const emit = defineEmits(['select'])
const confirm = () => {
  // 这里是子组件的值selectNode需要传值给父组件，就需要emit事件
  emit('select', selectNode)
  onClose()
}
const close = () => {
  selectNode.id = ''
  selectNode.name = ''
  confirm()
}
const show = async () => {
  await getTreeData()
  dialog.title = '选择上级部门'
  dialog.height = 420
  dialog.width = 300
  onShow()
}
// 这里是子组件暴露事件给父组件，让它来调用自己的事件
defineExpose({
  show
})

// 树相关
const {
  treeData,
  defaultProps,
  handleNodeClick,
  getTreeData,
  selectNode,
  openBtn,
  parentTree
} = useParent(emit)
</script>
<style lang="scss">
.el-tree {
  // 用户管理左侧页面布局微调，可以省略
  position: relative;
  right: 8px;
  // 将每一行的设置为相对定位 方便后面before after 使用绝对定位来固定位置
  .el-tree-node {
    position: relative;
    padding-left: 10px;
  }
  // 子集像右偏移 给数线留出距离
  .el-tree-node__children {
    padding-left: 20px;
  }
  //这是竖线
  .el-tree-node :last-child:before {
    height: 40px;
  }
  .el-tree > .el-tree-node:before {
    border-left: none;
  }
  .el-tree > .el-tree-node:after {
    border-top: none;
  }
  //这自定义的线 的公共部分
  .el-tree-node:before,
  .el-tree-node:after {
    content: '';
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
  .tree :first-child .el-tree-node:before {
    border-left: none;
  } // 竖线
  .el-tree-node:before {
    border-left: 1px dotted #d9d9d9;
    bottom: 0px;
    height: 100%;
    top: -25px;
    width: 1px;
  } //横线
  .el-tree-node:after {
    border-top: 1px dotted #d9d9d9;
    height: 20px;
    top: 14px;
    width: 24px;
  }
  .el-tree-node__expand-icon.is-leaf {
    width: 8px;
  } //去掉elementui自带的展开按钮 一个向下的按钮,打开时向右
  .el-tree-node__content > .el-tree-node__expand-icon {
    display: none;
  } //每一行的高度
  .el-tree-node__content {
    line-height: 30px;
    height: 30px;
    padding-left: 10px !important;
  }
} //去掉最上级的before after 即是去电最上层的连接线
.el-tree > div {
  &::before {
    display: none;
  }
  &::after {
    display: none;
  }
}
</style>
